<form #authConfigFrom="ngForm" class="clr-form clr-form-horizontal">
    <div class="clr-form-control">
        <label for="authMode" class="clr-control-label">
            {{ 'CONFIG.AUTH_MODE' | translate }}
            <clr-tooltip>
                <clr-icon
                    clrTooltipTrigger
                    shape="info-circle"
                    size="24"></clr-icon>
                <clr-tooltip-content
                    clrPosition="top-right"
                    clrSize="lg"
                    *clrIfOpen>
                    <span>{{ 'CONFIG.TOOLTIP.AUTH_MODE' | translate }}</span>
                </clr-tooltip-content>
            </clr-tooltip></label
        >
        <div class="clr-control-container">
            <div class="clr-select-wrapper">
                <select
                    class="clr-select"
                    id="authMode"
                    name="authMode"
                    (change)="handleOnChange($event)"
                    [disabled]="disabled(currentConfig.auth_mode)"
                    [(ngModel)]="currentConfig.auth_mode.value">
                    <option value="db_auth">
                        {{ 'CONFIG.AUTH_MODE_DB' | translate }}
                    </option>
                    <option value="ldap_auth">
                        {{ 'CONFIG.AUTH_MODE_LDAP' | translate }}
                    </option>
                    <option value="uaa_auth">
                        {{ 'CONFIG.AUTH_MODE_UAA' | translate }}
                    </option>
                    <option *ngIf="showHttpAuth" value="http_auth">
                        {{ 'CONFIG.AUTH_MODE_HTTP' | translate }}
                    </option>
                    <option value="oidc_auth">
                        {{ 'CONFIG.AUTH_MODE_OIDC' | translate }}
                    </option>
                </select>
            </div>
            <a
                rel="noopener noreferrer"
                href="https://openid.net/connect/"
                *ngIf="currentConfig?.auth_mode?.value === 'oidc_auth'"
                target="_blank"
                class="more-info-link"
                >{{ 'BUTTON.MORE_INFO' | translate }}</a
            >
        </div>
    </div>
    <section *ngIf="currentConfig?.auth_mode?.value !== 'db_auth'">
        <clr-checkbox-container>
            <label for="primaryAuthMode"
                >{{ 'CONFIG.PRIMARY_AUTH_MODE' | translate }}
                <clr-tooltip>
                    <clr-icon
                        clrTooltipTrigger
                        shape="info-circle"
                        size="24"></clr-icon>
                    <clr-tooltip-content
                        clrPosition="top-right"
                        clrSize="lg"
                        *clrIfOpen>
                        <span>{{
                            'CONFIG.TOOLTIP.PRIMARY_AUTH_MODE' | translate
                        }}</span>
                    </clr-tooltip-content>
                </clr-tooltip>
            </label>
            <clr-checkbox-wrapper>
                <input
                    type="checkbox"
                    clrCheckbox
                    name="primaryAuthMode"
                    id="primaryAuthMode"
                    [(ngModel)]="currentConfig.primary_auth_mode.value"
                    [disabled]="!currentConfig.primary_auth_mode.editable" />
            </clr-checkbox-wrapper>
        </clr-checkbox-container>
    </section>

    <section *ngIf="showUAA">
        <clr-input-container>
            <label for="uaa-endpoint" class="required">{{
                'CONFIG.UAA.ENDPOINT' | translate
            }}</label>
            <input
                type="text"
                id="uaa-endpoint"
                clrInput
                name="uaa-endpoint"
                size="35"
                [(ngModel)]="currentConfig.uaa_endpoint.value"
                [disabled]="!currentConfig.uaa_verify_cert.editable" />
        </clr-input-container>
        <clr-input-container>
            <label for="uaa-id" class="required">{{
                'CONFIG.UAA.CLIENT_ID' | translate
            }}</label>
            <input
                clrInput
                type="text"
                id="uaa-id"
                name="uaa-client-id"
                size="35"
                [(ngModel)]="currentConfig.uaa_client_id.value"
                [disabled]="!currentConfig.uaa_verify_cert.editable" />
        </clr-input-container>
        <clr-input-container>
            <label for="uaa-secret" class="required">{{
                'CONFIG.UAA.CLIENT_SECRET' | translate
            }}</label>
            <input
                clrInput
                id="uaa-secret"
                name="uaa-client-secret"
                type="password"
                size="35"
                [(ngModel)]="currentConfig.uaa_client_secret.value"
                [disabled]="!currentConfig.uaa_verify_cert.editable" />
        </clr-input-container>
        <clr-checkbox-container>
            <label for="uaa-cert">{{
                'CONFIG.UAA.VERIFY_CERT' | translate
            }}</label>
            <clr-checkbox-wrapper>
                <input
                    type="checkbox"
                    clrCheckbox
                    name="uaa-cert"
                    id="uaa-cert"
                    [(ngModel)]="currentConfig.uaa_verify_cert.value"
                    [disabled]="!currentConfig.uaa_verify_cert.editable" />
            </clr-checkbox-wrapper>
        </clr-checkbox-container>
    </section>

    <section *ngIf="showLdap">
        <clr-input-container>
            <label for="ldapUrl" class="required"
                >{{ 'CONFIG.LDAP.URL' | translate }}
            </label>
            <input
                clrInput
                name="ldapUrl"
                type="text"
                #ldapUrlInput="ngModel"
                [(ngModel)]="currentConfig.ldap_url.value"
                required
                id="ldapUrl"
                size="40"
                [disabled]="disabled(currentConfig.ldap_url)" />
            <clr-control-error>{{
                'TOOLTIP.ITEM_REQUIRED' | translate
            }}</clr-control-error>
        </clr-input-container>
        <clr-input-container>
            <label for="ldapSearchDN" class="required"
                >{{ 'CONFIG.LDAP.SEARCH_DN' | translate }}
                <clr-tooltip>
                    <clr-icon
                        clrTooltipTrigger
                        shape="info-circle"
                        size="24"></clr-icon>
                    <clr-tooltip-content
                        clrPosition="top-right"
                        clrSize="lg"
                        *clrIfOpen>
                        <span>{{
                            'CONFIG.TOOLTIP.LDAP_SEARCH_DN' | translate
                        }}</span>
                    </clr-tooltip-content>
                </clr-tooltip>
            </label>
            <input
                clrInput
                name="ldapSearchDN"
                type="text"
                #ldapSearchDNInput="ngModel"
                [(ngModel)]="currentConfig.ldap_search_dn.value"
                id="ldapSearchDN"
                size="40"
                [disabled]="disabled(currentConfig.ldap_search_dn)" />
        </clr-input-container>
        <clr-input-container>
            <label for="ldapSearchPwd">{{
                'CONFIG.LDAP.SEARCH_PWD' | translate
            }}</label>
            <!--disable property should be consistent with 'ldap_search_dn', as the back end API won't return this fielder, -->
            <input
                clrInput
                name="ldapSearchPwd"
                type="password"
                #ldapSearchPwdInput="ngModel"
                [(ngModel)]="currentConfig.ldap_search_password.value"
                id="ldapSearchPwd"
                size="40"
                [disabled]="disabled(currentConfig.ldap_search_dn)" />
        </clr-input-container>
        <clr-input-container>
            <label for="ldapBaseDN" class="required"
                >{{ 'CONFIG.LDAP.BASE_DN' | translate }}
                <clr-tooltip>
                    <clr-icon
                        clrTooltipTrigger
                        shape="info-circle"
                        size="24"></clr-icon>
                    <clr-tooltip-content
                        clrPosition="top-right"
                        clrSize="lg"
                        *clrIfOpen>
                        <span>{{
                            'CONFIG.TOOLTIP.LDAP_BASE_DN' | translate
                        }}</span>
                    </clr-tooltip-content>
                </clr-tooltip>
            </label>
            <input
                clrInput
                name="ldapBaseDN"
                type="text"
                #ldapBaseDNInput="ngModel"
                [(ngModel)]="currentConfig.ldap_base_dn.value"
                required
                id="ldapBaseDN"
                size="40"
                [disabled]="disabled(currentConfig.ldap_base_dn)" />
            <clr-control-error>{{
                'TOOLTIP.ITEM_REQUIRED' | translate
            }}</clr-control-error>
        </clr-input-container>

        <clr-input-container>
            <label for="ldapFilter">{{
                'CONFIG.LDAP.FILTER' | translate
            }}</label>
            <input
                clrInput
                name="ldapFilter"
                type="text"
                #ldapFilterInput="ngModel"
                [(ngModel)]="currentConfig.ldap_filter.value"
                id="ldapFilter"
                size="40"
                [disabled]="disabled(currentConfig.ldap_filter)" />
        </clr-input-container>

        <clr-input-container>
            <label for="ldapUid" class="required"
                >{{ 'CONFIG.LDAP.UID' | translate }}
                <clr-tooltip>
                    <clr-icon
                        clrTooltipTrigger
                        shape="info-circle"
                        size="24"></clr-icon>
                    <clr-tooltip-content
                        clrPosition="top-right"
                        clrSize="lg"
                        *clrIfOpen>
                        <span>{{ 'CONFIG.TOOLTIP.LDAP_UID' | translate }}</span>
                    </clr-tooltip-content>
                </clr-tooltip>
            </label>
            <input
                clrInput
                name="ldapUid"
                type="text"
                #ldapUidInput="ngModel"
                [(ngModel)]="currentConfig.ldap_uid.value"
                required
                id="ldapUid"
                size="40"
                [disabled]="disabled(currentConfig.ldap_uid)" />
            <clr-control-error>{{
                'TOOLTIP.ITEM_REQUIRED' | translate
            }}</clr-control-error>
        </clr-input-container>

        <clr-select-container>
            <label for="ldapScope"
                >{{ 'CONFIG.LDAP.SCOPE' | translate }}
                <clr-tooltip>
                    <clr-icon
                        clrTooltipTrigger
                        shape="info-circle"
                        size="24"></clr-icon>
                    <clr-tooltip-content
                        clrPosition="top-right"
                        clrSize="lg"
                        *clrIfOpen>
                        <span>{{
                            'CONFIG.TOOLTIP.LDAP_SCOPE' | translate
                        }}</span>
                    </clr-tooltip-content>
                </clr-tooltip>
            </label>
            <select
                clrSelect
                id="ldapScope"
                name="ldapScope"
                [(ngModel)]="currentConfig.ldap_scope.value"
                [disabled]="disabled(currentConfig.ldap_scope)">
                <option value="0">{{ 'CONFIG.SCOPE_BASE' | translate }}</option>
                <option value="1">
                    {{ 'CONFIG.SCOPE_ONE_LEVEL' | translate }}
                </option>
                <option value="2">
                    {{ 'CONFIG.SCOPE_SUBTREE' | translate }}
                </option>
            </select>
        </clr-select-container>

        <clr-input-container>
            <label for="ldapGroupBaseDN"
                >{{ 'CONFIG.LDAP.LDAP_GROUP_BASE_DN' | translate }}
                <clr-tooltip>
                    <clr-icon
                        clrTooltipTrigger
                        shape="info-circle"
                        size="24"></clr-icon>
                    <clr-tooltip-content
                        clrPosition="top-right"
                        clrSize="lg"
                        *clrIfOpen>
                        <span>{{
                            'CONFIG.LDAP.LDAP_GROUP_BASE_DN_INFO' | translate
                        }}</span>
                    </clr-tooltip-content>
                </clr-tooltip>
            </label>
            <input
                clrInput
                name="ldapGroupBaseDN"
                type="text"
                #ldapGroupDNInput="ngModel"
                [(ngModel)]="currentConfig.ldap_group_base_dn.value"
                id="ldapGroupBaseDN"
                size="40"
                [disabled]="disabled(currentConfig.ldap_group_base_dn)" />
        </clr-input-container>

        <clr-input-container>
            <label for="ldapGroupFilter"
                >{{ 'CONFIG.LDAP.LDAP_GROUP_FILTER' | translate }}
                <clr-tooltip>
                    <clr-icon
                        clrTooltipTrigger
                        shape="info-circle"
                        size="24"></clr-icon>
                    <clr-tooltip-content
                        clrPosition="top-right"
                        clrSize="lg"
                        *clrIfOpen>
                        <span>{{
                            'CONFIG.LDAP.LDAP_GROUP_FILTER_INFO' | translate
                        }}</span>
                    </clr-tooltip-content>
                </clr-tooltip>
            </label>
            <input
                clrInput
                name="ldapGroupFilter"
                type="text"
                #ldapGroupFilterInput="ngModel"
                [(ngModel)]="currentConfig.ldap_group_search_filter.value"
                id="ldapGroupFilter"
                size="40"
                [disabled]="disabled(currentConfig.ldap_group_search_filter)" />
        </clr-input-container>

        <clr-input-container>
            <label for="ldapGroupGID"
                >{{ 'CONFIG.LDAP.LDAP_GROUP_GID' | translate }}
                <clr-tooltip>
                    <clr-icon
                        clrTooltipTrigger
                        shape="info-circle"
                        size="24"></clr-icon>
                    <clr-tooltip-content
                        clrPosition="top-right"
                        clrSize="lg"
                        *clrIfOpen>
                        <span>{{
                            'CONFIG.LDAP.LDAP_GROUP_GID_INFO' | translate
                        }}</span>
                    </clr-tooltip-content>
                </clr-tooltip>
            </label>
            <input
                clrInput
                name="ldapGroupGID"
                type="text"
                #ldapGroupDNInput="ngModel"
                [(ngModel)]="currentConfig.ldap_group_attribute_name.value"
                id="ldapGroupGID"
                size="40"
                [disabled]="
                    disabled(currentConfig.ldap_group_attribute_name)
                " />
        </clr-input-container>

        <!-- This is for ldap group admin dn -->
        <clr-input-container>
            <label for="ldapGroupAdminDN"
                >{{ 'CONFIG.LDAP.LDAP_GROUP_ADMIN_DN' | translate }}
                <clr-tooltip>
                    <clr-icon
                        clrTooltipTrigger
                        shape="info-circle"
                        size="24"></clr-icon>
                    <clr-tooltip-content
                        clrPosition="top-right"
                        clrSize="lg"
                        *clrIfOpen>
                        <span>{{
                            'CONFIG.LDAP.LDAP_GROUP_ADMIN_DN_INFO' | translate
                        }}</span>
                    </clr-tooltip-content>
                </clr-tooltip>
            </label>
            <input
                clrInput
                name="ldapGroupAdminDN"
                type="text"
                #ldapGroupFilterInput="ngModel"
                [(ngModel)]="currentConfig.ldap_group_admin_dn.value"
                id="ldapGroupAdminDN"
                size="40"
                [disabled]="disabled(currentConfig.ldap_group_admin_dn)" />
        </clr-input-container>

        <!-- End of ldap group admin dn -->
        <clr-input-container>
            <label for="ldapGroupAdminDN"
                >{{ 'CONFIG.LDAP.LDAP_GROUP_MEMBERSHIP' | translate }}
                <clr-tooltip>
                    <clr-icon
                        clrTooltipTrigger
                        shape="info-circle"
                        size="24"></clr-icon>
                    <clr-tooltip-content
                        clrPosition="top-right"
                        clrSize="lg"
                        *clrIfOpen>
                        <span>{{
                            'CONFIG.LDAP.LDAP_GROUP_MEMBERSHIP_INFO' | translate
                        }}</span>
                    </clr-tooltip-content>
                </clr-tooltip>
            </label>
            <input
                clrInput
                name="ldapGroupMembership"
                type="text"
                #ldapGroupFilterInput="ngModel"
                [(ngModel)]="
                    currentConfig.ldap_group_membership_attribute.value
                "
                id="ldapGroupMembership"
                size="40"
                [disabled]="
                    disabled(currentConfig.ldap_group_membership_attribute)
                " />
        </clr-input-container>
        <clr-select-container>
            <label for="ldapGroupScope"
                >{{ 'CONFIG.LDAP.GROUP_SCOPE' | translate }}
                <clr-tooltip>
                    <clr-icon
                        clrTooltipTrigger
                        shape="info-circle"
                        size="24"></clr-icon>
                    <clr-tooltip-content
                        clrPosition="top-right"
                        clrSize="lg"
                        *clrIfOpen>
                        <span>{{
                            'CONFIG.LDAP.GROUP_SCOPE_INFO' | translate
                        }}</span>
                    </clr-tooltip-content>
                </clr-tooltip>
            </label>
            <select
                clrSelect
                id="ldapGroupScope"
                name="ldapGroupScope"
                [(ngModel)]="currentConfig.ldap_group_search_scope.value"
                [disabled]="disabled(currentConfig.ldap_group_search_scope)">
                <option value="0">{{ 'CONFIG.SCOPE_BASE' | translate }}</option>
                <option value="1">
                    {{ 'CONFIG.SCOPE_ONE_LEVEL' | translate }}
                </option>
                <option value="2">
                    {{ 'CONFIG.SCOPE_SUBTREE' | translate }}
                </option>
            </select>
        </clr-select-container>
        <clr-checkbox-container>
            <label for="ldapGroupAttachParallel">
                {{ 'CONFIG.LDAP.GROUP_ATTACH_PARALLEL' | translate }}
                <clr-tooltip>
                    <clr-icon
                        clrTooltipTrigger
                        shape="info-circle"
                        size="24"></clr-icon>
                    <clr-tooltip-content
                        *clrIfOpen
                        clrPosition="top-right"
                        clrSize="lg">
                        <span>{{
                            'CONFIG.LDAP.GROUP_ATTACH_PARALLEL_INFO' | translate
                        }}</span>
                    </clr-tooltip-content>
                </clr-tooltip>
            </label>
            <clr-checkbox-wrapper>
                <input
                    (ngModelChange)="setLdapGroupAttachParallelValue($event)"
                    [disabled]="
                        disabled(currentConfig.ldap_group_attach_parallel)
                    "
                    [ngModel]="currentConfig.ldap_group_attach_parallel.value"
                    clrCheckbox
                    id="ldapGroupAttachParallel"
                    name="ldapGroupAttachParallel"
                    type="checkbox" />
            </clr-checkbox-wrapper>
        </clr-checkbox-container>
    </section>
    <clr-checkbox-container *ngIf="showSelfReg">
        <label for="selfReg"
            >{{ 'CONFIG.SELF_REGISTRATION' | translate }}
            <clr-tooltip>
                <clr-icon
                    clrTooltipTrigger
                    shape="info-circle"
                    size="24"></clr-icon>
                <clr-tooltip-content
                    clrPosition="top-right"
                    clrSize="lg"
                    *clrIfOpen>
                    <span
                        *ngIf="checkable; else elseBlock"
                        class="tooltip-content"
                        >{{
                            'CONFIG.TOOLTIP.SELF_REGISTRATION_ENABLE'
                                | translate
                        }}</span
                    >
                    <ng-template #elseBlock>
                        <span class="tooltip-content">{{
                            'CONFIG.TOOLTIP.SELF_REGISTRATION_DISABLE'
                                | translate
                        }}</span>
                    </ng-template>
                </clr-tooltip-content>
            </clr-tooltip>
        </label>
        <clr-checkbox-wrapper>
            <input
                type="checkbox"
                clrCheckbox
                name="selfReg"
                id="selfReg"
                [(ngModel)]="currentConfig.self_registration.value"
                [disabled]="disabled(currentConfig.self_registration)" />
        </clr-checkbox-wrapper>
    </clr-checkbox-container>

    <section *ngIf="showLdap">
        <clr-checkbox-container>
            <label for="ldapVerifyCert"
                >{{ 'CONFIG.LDAP.VERIFY_CERT' | translate }}
                <clr-tooltip>
                    <clr-icon
                        clrTooltipTrigger
                        shape="info-circle"
                        size="24"></clr-icon>
                    <clr-tooltip-content
                        clrPosition="top-right"
                        clrSize="lg"
                        *clrIfOpen>
                        <span>{{
                            'CONFIG.TOOLTIP.VERIFY_CERT' | translate
                        }}</span>
                    </clr-tooltip-content>
                </clr-tooltip>
            </label>
            <clr-checkbox-wrapper>
                <input
                    type="checkbox"
                    clrCheckbox
                    name="ldapVerifyCert"
                    id="ldapVerifyCert"
                    [ngModel]="currentConfig.ldap_verify_cert.value"
                    [disabled]="disabled(currentConfig.ldap_scope)"
                    (ngModelChange)="setVerifyCertValue($event)" />
            </clr-checkbox-wrapper>
        </clr-checkbox-container>
    </section>
    <section *ngIf="showHttpAuth">
        <clr-input-container>
            <label for="http_authproxy_endpoint" class="required">{{
                'CONFIG.HTTP_AUTH.ENDPOINT' | translate
            }}</label>
            <input
                clrInput
                type="text"
                pattern="^([hH][tT]{2}[pP]:\/\/|[hH][tT]{2}[pP][sS]:\/\/)(.*?)*$"
                #httpAuthproxyEndpointInput="ngModel"
                required
                id="http_authproxy_endpoint"
                name="http_authproxy_endpoint"
                size="35"
                [(ngModel)]="currentConfig.http_authproxy_endpoint.value"
                [disabled]="!currentConfig.http_authproxy_endpoint.editable" />
            <clr-control-error>{{
                'TOOLTIP.ENDPOINT_FORMAT' | translate
            }}</clr-control-error>
        </clr-input-container>
        <clr-input-container>
            <label for="http_authproxy_tokenreview_endpoint" class="required">{{
                'CONFIG.HTTP_AUTH.TOKEN_REVIEW' | translate
            }}</label>
            <input
                clrInput
                type="text"
                #httpAuthproxyTokenReviewInput="ngModel"
                pattern="^([hH][tT]{2}[pP]:\/\/|[hH][tT]{2}[pP][sS]:\/\/)(.*?)*$"
                required
                id="http_authproxy_tokenreview_endpoint"
                name="http_authproxy_tokenreview_endpoint"
                size="35"
                [(ngModel)]="
                    currentConfig.http_authproxy_tokenreview_endpoint.value
                "
                [disabled]="
                    !currentConfig.http_authproxy_tokenreview_endpoint.editable
                " />
            <clr-control-error>{{
                'TOOLTIP.ENDPOINT_FORMAT' | translate
            }}</clr-control-error>
        </clr-input-container>
        <clr-input-container>
            <label for="HttpAdminGroup">{{
                'CONFIG.HTTP_AUTH.ADMIN_GROUPS' | translate
            }}</label>
            <input
                autocomplete="off"
                (blur)="trimSpace($event)"
                clrInput
                name="HttpAdminGroup"
                type="text"
                #ngHttpAdminGroup="ngModel"
                [(ngModel)]="currentConfig.http_authproxy_admin_groups.value"
                id="HttpAdminGroup"
                size="35"
                [disabled]="
                    disabled(currentConfig.http_authproxy_admin_groups)
                " />
        </clr-input-container>
        <clr-checkbox-container clrInline>
            <label for="http_authproxy_verify_cert" class="required">{{
                'CONFIG.HTTP_AUTH.VERIFY_CERT' | translate
            }}</label>
            <clr-checkbox-wrapper>
                <input
                    type="checkbox"
                    clrCheckbox
                    name="http_authproxy_verify_cert"
                    id="http_authproxy_verify_cert"
                    [(ngModel)]="currentConfig.http_authproxy_verify_cert.value"
                    [disabled]="
                        !currentConfig.http_authproxy_verify_cert.editable
                    " />
            </clr-checkbox-wrapper>
        </clr-checkbox-container>
        <clr-checkbox-container clrInline>
            <label for="http_authproxy_skip_search" class="required">{{
                'CONFIG.HTTP_AUTH.SKIP_SEARCH' | translate
            }}</label>
            <clr-checkbox-wrapper>
                <input
                    type="checkbox"
                    clrCheckbox
                    name="http_authproxy_skip_search"
                    id="http_authproxy_skip_search"
                    [disabled]="
                        !currentConfig.http_authproxy_skip_search.editable
                    "
                    [(ngModel)]="
                        currentConfig.http_authproxy_skip_search.value
                    " />
            </clr-checkbox-wrapper>
        </clr-checkbox-container>
    </section>

    <section *ngIf="showOIDC">
        <clr-input-container>
            <label class="required" for="oidcName"
                >{{ 'CONFIG.OIDC.OIDC_PROVIDER' | translate }}
                <clr-tooltip>
                    <clr-icon
                        clrTooltipTrigger
                        shape="info-circle"
                        size="24"></clr-icon>
                    <clr-tooltip-content
                        clrPosition="top-right"
                        clrSize="lg"
                        *clrIfOpen>
                        <span>{{ 'TOOLTIP.OIDC_NAME' | translate }}</span>
                    </clr-tooltip-content>
                </clr-tooltip>
            </label>
            <input
                clrInput
                name="oidcName"
                required
                type="text"
                #oidcNameInput="ngModel"
                [(ngModel)]="currentConfig.oidc_name.value"
                id="oidcName"
                size="40"
                [disabled]="disabled(currentConfig.oidc_name)" />
            <clr-control-error>{{
                'TOOLTIP.ITEM_REQUIRED' | translate
            }}</clr-control-error>
        </clr-input-container>
        <clr-input-container>
            <label class="required" for="oidcEndpoint"
                >{{ 'CONFIG.OIDC.ENDPOINT' | translate }}
                <clr-tooltip>
                    <clr-icon
                        clrTooltipTrigger
                        shape="info-circle"
                        size="24"></clr-icon>
                    <clr-tooltip-content
                        clrPosition="top-right"
                        clrSize="lg"
                        *clrIfOpen>
                        <span>{{ 'TOOLTIP.OIDC_ENDPOINT' | translate }}</span>
                    </clr-tooltip-content>
                </clr-tooltip>
            </label>
            <input
                clrInput
                name="oidcEndpoint"
                type="text"
                #oidcEndpointInput="ngModel"
                required
                [(ngModel)]="currentConfig.oidc_endpoint.value"
                id="oidcEndpoint"
                size="40"
                [disabled]="disabled(currentConfig.oidc_endpoint)"
                pattern="^([hH][tT]{2}[pP][sS]:\/\/)(.*?)*$" />
            <clr-control-error>{{
                'TOOLTIP.OIDC_ENDPOINT_FORMAT' | translate
            }}</clr-control-error>
        </clr-input-container>
        <clr-input-container>
            <label for="oidcClientId" class="required">{{
                'CONFIG.OIDC.CLIENT_ID' | translate
            }}</label>
            <input
                clrInput
                name="oidcClientId"
                type="text"
                #oidcClientIdInput="ngModel"
                required
                [(ngModel)]="currentConfig.oidc_client_id.value"
                id="oidcClientId"
                size="40"
                [disabled]="disabled(currentConfig.oidc_client_id)" />
            <clr-control-error>{{
                'TOOLTIP.ITEM_REQUIRED' | translate
            }}</clr-control-error>
        </clr-input-container>
        <clr-input-container>
            <label for="oidcClientSecret" class="required">{{
                'CONFIG.OIDC.CLIENTSECRET' | translate
            }}</label>
            <input
                clrInput
                name="oidcClientSecret"
                type="password"
                #oidcClientSecretInput="ngModel"
                required
                [(ngModel)]="currentConfig.oidc_client_secret.value"
                id="oidcClientSecret"
                size="40"
                [disabled]="disabled(currentConfig.oidc_client_secret)" />
            <clr-control-error>{{
                'TOOLTIP.ITEM_REQUIRED' | translate
            }}</clr-control-error>
        </clr-input-container>
        <clr-input-container>
            <label for="OIDCGroupFilter"
                >{{ 'CONFIG.OIDC.OIDC_GROUP_FILTER' | translate }}
                <clr-tooltip>
                    <clr-icon
                        clrTooltipTrigger
                        shape="info-circle"
                        size="24"></clr-icon>
                    <clr-tooltip-content
                        clrPosition="top-right"
                        clrSize="lg"
                        *clrIfOpen>
                        <span>{{
                            'CONFIG.OIDC.OIDC_GROUP_FILTER_INFO' | translate
                        }}</span>
                    </clr-tooltip-content>
                </clr-tooltip>
            </label>
            <input
                clrInput
                name="OIDCGroupFilter"
                type="text"
                #ngOIDCGroupFilter="ngModel"
                [(ngModel)]="currentConfig.oidc_group_filter.value"
                id="OIDCGroupFilter"
                size="40"
                [disabled]="disabled(currentConfig.oidc_group_filter)" />
        </clr-input-container>
        <clr-input-container>
            <label for="oidcGroupClaim"
                >{{ 'CONFIG.OIDC.GROUP_CLAIM_NAME' | translate }}
                <clr-tooltip>
                    <clr-icon
                        clrTooltipTrigger
                        shape="info-circle"
                        size="24"></clr-icon>
                    <clr-tooltip-content
                        clrPosition="top-right"
                        clrSize="lg"
                        *clrIfOpen>
                        <span>{{
                            'CONFIG.OIDC.GROUP_CLAIM_NAME_INFO' | translate
                        }}</span>
                    </clr-tooltip-content>
                </clr-tooltip>
            </label>
            <input
                clrInput
                name="oidcGroupClaim"
                type="text"
                #ngOIDCGroupClaim="ngModel"
                [(ngModel)]="currentConfig.oidc_groups_claim.value"
                id="oidcGroupClaim"
                size="40"
                [disabled]="disabled(currentConfig.oidc_groups_claim)" />
        </clr-input-container>
        <clr-input-container>
            <label for="OIDCAdminGroup"
                >{{ 'CONFIG.OIDC.OIDC_ADMIN_GROUP' | translate }}
                <clr-tooltip>
                    <clr-icon
                        clrTooltipTrigger
                        shape="info-circle"
                        size="24"></clr-icon>
                    <clr-tooltip-content
                        clrPosition="top-right"
                        clrSize="lg"
                        *clrIfOpen>
                        <span>{{
                            'CONFIG.OIDC.OIDC_ADMIN_GROUP_INFO' | translate
                        }}</span>
                    </clr-tooltip-content>
                </clr-tooltip>
            </label>
            <input
                clrInput
                name="OIDCAdminGroup"
                type="text"
                #ngOIDCAdminGroup="ngModel"
                [(ngModel)]="currentConfig.oidc_admin_group.value"
                id="OIDCAdminGroup"
                size="40"
                [disabled]="disabled(currentConfig.oidc_admin_group)" />
        </clr-input-container>
        <clr-input-container>
            <label class="required" for="oidcScope"
                >{{ 'CONFIG.OIDC.SCOPE' | translate }}
                <clr-tooltip>
                    <clr-icon
                        clrTooltipTrigger
                        shape="info-circle"
                        size="24"></clr-icon>
                    <clr-tooltip-content
                        clrPosition="top-right"
                        clrSize="lg"
                        *clrIfOpen>
                        <span>{{ 'TOOLTIP.OIDC_SCOPE' | translate }}</span>
                    </clr-tooltip-content>
                </clr-tooltip>
            </label>
            <input
                clrInput
                name="oidcScope"
                type="text"
                #oidcScopeInput="ngModel"
                [(ngModel)]="currentConfig.oidc_scope.value"
                id="oidcScope"
                size="40"
                required
                [disabled]="disabled(currentConfig.oidc_scope)"
                pattern="^([\w.]+,){0,}openid(,[\w.]+){0,}$" />
            <clr-control-error>{{
                'TOOLTIP.SCOPE_REQUIRED' | translate
            }}</clr-control-error>
        </clr-input-container>
        <clr-checkbox-container>
            <label for="oidc_verify_cert"
                >{{ 'CONFIG.OIDC.OIDC_VERIFYCERT' | translate }}
                <clr-tooltip>
                    <clr-icon
                        clrTooltipTrigger
                        shape="info-circle"
                        size="24"></clr-icon>
                    <clr-tooltip-content
                        clrPosition="top-right"
                        clrSize="lg"
                        *clrIfOpen>
                        <span>{{ 'TOOLTIP.OIDC_VERIFYCERT' | translate }}</span>
                    </clr-tooltip-content>
                </clr-tooltip>
            </label>
            <clr-checkbox-wrapper>
                <input
                    type="checkbox"
                    clrCheckbox
                    name="oidc_verify_cert"
                    id="oidc_verify_cert"
                    [disabled]="disabled(currentConfig.oidc_verify_cert)"
                    [(ngModel)]="currentConfig.oidc_verify_cert.value" />
            </clr-checkbox-wrapper>
        </clr-checkbox-container>
        <clr-checkbox-container>
            <label for="oidcAutoOnboard"
                >{{ 'CONFIG.OIDC.OIDC_AUTOONBOARD' | translate }}
                <clr-tooltip>
                    <clr-icon
                        clrTooltipTrigger
                        shape="info-circle"
                        size="24"></clr-icon>
                    <clr-tooltip-content
                        clrPosition="top-right"
                        clrSize="lg"
                        *clrIfOpen>
                        <span>{{
                            'TOOLTIP.OIDC_AUTOONBOARD' | translate
                        }}</span>
                    </clr-tooltip-content>
                </clr-tooltip>
            </label>
            <clr-checkbox-wrapper>
                <input
                    type="checkbox"
                    clrCheckbox
                    name="oidcAutoOnboard"
                    id="oidcAutoOnboard"
                    [disabled]="disabled(currentConfig.oidc_auto_onboard)"
                    (change)="changeAutoOnBoard()"
                    [(ngModel)]="currentConfig.oidc_auto_onboard.value" />
            </clr-checkbox-wrapper>
        </clr-checkbox-container>
        <clr-input-container>
            <label for="oidcUserClaim"
                >{{ 'CONFIG.OIDC.USER_CLAIM' | translate }}
                <clr-tooltip>
                    <clr-icon
                        clrTooltipTrigger
                        shape="info-circle"
                        size="24"></clr-icon>
                    <clr-tooltip-content
                        clrPosition="top-right"
                        clrSize="lg"
                        *clrIfOpen>
                        <span>{{ 'TOOLTIP.OIDC_USER_CLAIM' | translate }}</span>
                    </clr-tooltip-content>
                </clr-tooltip>
            </label>
            <input
                autocomplete="off"
                clrInput
                name="oidcUserClaim"
                type="text"
                #oidcUserClaimInput="ngModel"
                [(ngModel)]="currentConfig.oidc_user_claim.value"
                id="oidcUserClaim"
                size="40"
                [disabled]="
                    !currentConfig.oidc_auto_onboard.value ||
                    disabled(currentConfig.oidc_user_claim)
                " />
        </clr-input-container>
        <div class="oidc-tip">
            {{ 'CONFIG.OIDC.OIDC_REDIREC_URL' | translate }}
            <span>{{ redirectUrl }}/c/oidc/callback</span>
        </div>
    </section>
</form>
<div>
    <button
        type="button"
        id="config_auth_save"
        class="btn btn-primary"
        (click)="save()"
        [disabled]="!isValid() || !hasChanges() || inProcess()">
        {{ 'BUTTON.SAVE' | translate }}
    </button>
    <button
        type="button"
        class="btn btn-outline"
        (click)="cancel()"
        [disabled]="!isValid() || !hasChanges() || inProcess()">
        {{ 'BUTTON.CANCEL' | translate }}
    </button>
    <button
        type="button"
        id="ping-test"
        class="btn btn-outline"
        (click)="pingTestServer()"
        *ngIf="showTestingServerBtn"
        [disabled]="!isConfigValidForTesting()">
        {{ (showLdap ? 'BUTTON.TEST_LDAP' : 'BUTTON.TEST_OIDC') | translate }}
    </button>
    <span
        id="forTestingLDAP"
        class="spinner spinner-inline"
        [hidden]="hideTestingSpinner"></span>
</div>
